<template>
  <!-- 最简编辑器 -->
  <client-only>
    <div class="editor-container">
      <toolbar :editor="editorRef" :default-config="toolbarConfig" mode="simple" style="border-bottom: 1px solid #ccc" />
      <editor :mode="'simple'" :model-value="props.modelValue" :style="'height:' + styleHeight" @on-change="handleChange" @on-created="handleCreated" />
    </div>
  </client-only>
</template>

<script setup>
  import '@wangeditor/editor/dist/css/style.css'
  import { onUnmounted, ref, shallowRef } from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

  const props = defineProps({
    modelValue: {
      type: String,
      default: ''
    },
    styleHeight: {
      type: String,
      default: '100px'
    }
  })

  // 编辑器实例
  const editorRef = shallowRef()
  const handleCreated = (editor) => {
    editorRef.value = editor
    //console.log(editor.getAllMenuKeys())
  }
  const toolbarConfig = ref({
    toolbarKeys: ['headerSelect', 'blockquote', 'bold', '|', 'code', 'codeBlock', '|', 'redo', 'undo', '|', 'fullScreen']
  })

  const emit = defineEmits(['update:modelValue'])
  const handleChange = (editor) => {
    emit('update:modelValue', editor.getHtml())
  }

  onUnmounted(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
  })
</script>
